<!DOCTYPE html>
<html>

	<head>
		<meta charset="GB2312">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.lists {
				position: relative;
				margin: 50px;
				width: 200px;
				box-sizing: border-box;
				padding: 16px 0 16px 0;
				background: #6e6568;
				list-style: none;
			}
			
			.list {
				width: 100%;
				line-height: 28px;
				color: white;
				font-size: 14px;
				padding-left: 12px;
			}
			
			.list .menu:hover {
				color: #c81623;
			}
			
			.list .fgx {
				margin: 0 4px;
			}
			
			.list:hover {
				background: #999395;
			}
			
			.list:hover .box {
				display: block;
			}
			
			.list .box {
				display: none;
				width: 1000px;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				right: -1000px;
				background: #fff;
				padding: 20px 0 10px 20px;
			}
			
			.box p:nth-child(n+2) {
				padding: 6px 0;
			}
			
			.box p:nth-child(n+2) span {
				display: inline-block;
				margin: 4px 0;
			}
			
			.box .tips {
				display: inline-block;
				background: #999395;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				margin-right: 10px;
				padding: 0 10px;
			}
			
			.box span:hover {
				color: red
			}
			
			.box .tips:hover {
				background: #5c5251;
				color: #fff;
			}
			
			.box a {
				display: inline-block;
				margin-left: 5px;
				font-size: 12px;
			}
			
			.box .title {
				vertical-align: top;
				display: inline-block;
				width: 70px;
				text-align: right;
				font-size: 12px;
				line-height: 16px;
				color: #666;
				font-weight: bold;
			}
			
			.title a {
				text-align: right;
			}
			
			.tags {
				vertical-align: top;
				display: inline-block;
				color: #666;
				font-size: 12px;
				width: 700px;
				line-height: 16px;
				margin-left: 15px;
			}
			
			.tag1 {
				padding: 0 10px;
				border-left: 1px solid #e0e0e0;
				font-weight: 700;
				color: #c81623;
				height: 14px;
				line-height: 14px;
				border: 1px dotted #db7078;
			}
			
			.tag {
				padding: 0 10px;
				border-left: 1px solid #e0e0e0;
			}
			
			.imgBox {
				box-sizing: border-box;
				width: 198px;
				height: 424px;
				position: absolute;
				top: 20px;
				right: 0;
				padding: 0 14px 0 15px;
			}
			
			.sImg {
				display: inline-block;
				float: left;
				width: 83px;
				height: 35px;
				margin-right: 1px;
				margin-top: 1px;
			}
			
			.bImg {
				width: 168px;
				height: 134px;
				margin-top: 1px;
				display: block;
				float: left;
			}
			
			.imgBox img:nth-of-type(9) {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<ul class="lists">
		</ul>
	</body>
	<script>
		//获取ul
		var lists = document.getElementsByClassName("lists")[0];

		//callback回调函数
		function getCategoryCallback(obj) {
			console.log(obj);
			let Data = obj.data;

			//遍历产生li
			for(let i = 0; i < Data.length; i++) {
				let list = document.createElement("li");
				list.className = "list";
				lists.appendChild(list);
				let box = document.createElement("div");
				box.className = "box";
				list.appendChild(box);

				for(let j = 0; j < Data[i].s.length; j++) {
					if(j == 0) {
						let span = document.createElement("span");
						list.appendChild(span);
						span.className = "menu";
						var str = Data[i].s[j].n;
						str = str.split("|")[1];
						span.innerHTML = str;
					} else if(j > 0) {

						let fgx = document.createElement("a");
						fgx.innerHTML = "/";
						fgx.className = "fgx";
						list.appendChild(fgx);
						let span = document.createElement("span");
						list.appendChild(span);
						span.className = "menu";
						var str = Data[i].s[j].n;
						str = str.split("|")[1];
						span.innerHTML = str;
					}
				}

				if(Data[i].t.length > 0) {
					let p = document.createElement("p");
					box.appendChild(p);
					for(let j = 0; j < Data[i].t.length; j++) {
						let str = Data[i].t[j];
						let span = document.createElement("span");
						span.className = "tips";
						p.appendChild(span);
						span.innerHTML = str.split("|")[1];

						let t = document.createElement("a");
						t.innerHTML = ">";
						span.appendChild(t);

					}
				}

				if(Data[i].s[0].s.length > 0) {

					let dataS = Data[i].s[0].s;
					for(let j = 0; j < dataS.length; j++) {
						let p = document.createElement("p");
						box.appendChild(p);
						let title = document.createElement("span");
						title.className = "title";
						p.appendChild(title);

						title.innerHTML = dataS[j].n.split("|")[1];

						let t = document.createElement("a");
						t.innerHTML = ">";
						title.appendChild(t);

						let tags = document.createElement("div");
						tags.className = "tags";
						p.appendChild(tags);

						for(let m = 0; m < dataS[j].s.length; m++) {
							let tag = document.createElement("span");
							tag.className = "tag";
							tag.innerHTML = dataS[j].s[m].n.split("|")[1];
							if(dataS[j].s[m].n.split("|")[3] == 1) {
								tag.className = "tag1";
							}
							tags.appendChild(tag);
						}
					}
				}

				let imgBox = document.createElement("div");
				box.appendChild(imgBox);
				imgBox.className = "imgBox";
				for(let j = 0; j < 8; j++) {
					let img = document.createElement("img");
					img.className = "sImg";
					img.src = "//img12.360buyimg.com/" + Data[i].b[j].split("|")[2];
					imgBox.appendChild(img);
				}
				
				for(let j = 0; j < 1; j++) {
					let img = document.createElement("img");
					img.className = "bImg";
					img.src = "//img12.360buyimg.com/" + Data[i].p[j].split("|")[2];
					imgBox.appendChild(img);
				}
			}
		}
		
		var tag = document.createElement("script");
		tag.src = "https://dc.3.cn/category/get?callback=getCategoryCallback";
		document.body.appendChild(tag);
		document.body.removeChild(tag);
	</script>

</html>